<template>
  <el-row>
    <el-col>
      <el-card>
        <!--搜索框开始-->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-button type="success" style="margin-bottom: 10px;" @click="showAddModel">新增</el-button>
          </el-col>
          <el-col :span="16">
            <div class="m-4">
              <div class="block" style="float: right; margin-right: 10px;">
                <el-input
                    v-model="condition.username"
                    placeholder="请输入用户名"
                    clearable
                    @input="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
              <div class="block" style="float: right; margin-right: 10px;">
                <el-input
                    v-model="condition.phone"
                    placeholder="请输入手机号"
                    clearable
                    @input="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
              <div class="block" style="float: right; margin-right: 10px;">
                <el-input
                    v-model="condition.email"
                    placeholder="请输入邮箱"
                    clearable
                    @input="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
              <div class="block" style="float: right; margin-right: 10px;">
                <el-input
                    v-model="condition.realname"
                    placeholder="请输入真实姓名"
                    clearable
                    @input="selectByPage(1)"
                    style="width: 150px"
                />
              </div>
            </div>
          </el-col>
        </el-row>
        <!--搜索框结束-->
        <!--表格开始-->
        <el-table :data="pageInfo.list" border style="width: 100%;">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="phone" label="手机号" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="realname" label="真实姓名" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="status" label="是否被禁用">

            <template #default="scope">
              <el-switch v-model="scope.row.status"
                         inline-prompt
                         :inactive-value="1"
                         :active-value="0"
                         style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                         inactive-text="禁用"
                         active-text="启用"
                         @change="chgStatus(scope.row.id, scope.row.status)"
                        >

              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template #default="scope">
              <el-button type="primary" style=" margin-bottom: 10px" @click="showUpdateModel(scope.row.id)"> 修改</el-button>
              <el-popconfirm
                  title="你确定要重置密码吗？"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  @confirm="updatePwd(scope.row.id)"
              >
                <template #reference>
                  <el-button style="margin-bottom: 10px;" type="warning">重置密码</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--表格结束-->
        <!-- 分页开始 -->
        <el-row class="row-bg" justify="center">
          <el-pagination background layout="prev, pager, next"
                         :page-count="pageInfo.pages"
                         @update:current-page="selectByPage"
                         style="margin-top: 10px;"
                         v-model:current-page="pageInfo.pageNum" />
        </el-row>
        <!-- 分页结束 -->
      </el-card>
    </el-col>
  </el-row>
  <!-- 新增管理员对话框开始 -->
  <el-dialog v-model="addDislogShow" title="新增分类" width="500">
    <el-form>
      <el-form-item label="用户名" label-width="20%">
        <el-input v-model="adminAdd.username" autocomplete="off" placeholder="请输入用户名" style="width: 240px" />
      </el-form-item>
      <el-form-item label="密码" label-width="20%">
        <el-input type="password" v-model="adminAdd.password" autocomplete="off" placeholder="请输入密码" style="width: 240px" />
      </el-form-item>
      <el-form-item label="手机号" label-width="20%">
        <el-input  v-model="adminAdd.phone" autocomplete="off" placeholder="请输入手机号" style="width: 240px" />
      </el-form-item>
      <el-form-item label="邮箱号" label-width="20%">
        <el-input  v-model="adminAdd.email" autocomplete="off" placeholder="请输入邮箱号" style="width: 240px" />
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input  v-model="adminAdd.realname" autocomplete="off" placeholder="请输入真实姓名" style="width: 240px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDislogShow = false">取消</el-button>
        <el-button type="primary" @click="insert">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增管理员对话框结束 -->
  <!-- 修改管理员对话框结束 -->
  <el-dialog v-model="UpdateDislogShow" title="新增分类" width="500">
    <el-form>
      <el-form-item label="用户名" label-width="20%">
        <el-input v-model="adminUpdate.username" autocomplete="off" placeholder="请输入用户名" style="width: 240px" />
      </el-form-item>
      <el-form-item label="手机号" label-width="20%">
        <el-input  v-model="adminUpdate.phone" autocomplete="off" placeholder="请输入手机号" style="width: 240px" />
      </el-form-item>
      <el-form-item label="邮箱号" label-width="20%">
        <el-input  v-model="adminUpdate.email" autocomplete="off" placeholder="请输入邮箱号" style="width: 240px" />
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input  v-model="adminUpdate.realname" autocomplete="off" placeholder="请输入真实姓名" style="width: 240px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="UpdateDislogShow = false">取消</el-button>
        <el-button type="primary" @click="update">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改管理员对话框结束 -->
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import adminApi from "@/api/adminApi.js";
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//搜索条件
const condition = ref({
  username: null,
  phone: null,
  realname: null,
  email: null
});
//分页的信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});
//请求所有的数据
const selectByPage = (PageNum) => {
  adminApi.selectByPage(condition.value, PageNum, 10)
      .then(resp => {
        pageInfo.value =resp.data
      })
}
//新建管理员变量
const adminAdd = ref({
  username: "",
  password: "",
  phone: "",
  email: "",
  realname: "",
  status: 0
})
//是否显示添加对话框
const addDislogShow = ref(false);
//新增显示对话框的
const showAddModel = ()=>{
  addDislogShow.value=true;
}
const insert = () =>{
  adminApi.insert(adminAdd.value)
      .then(resp => {
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          selectByPage(1)
          addDislogShow.value=false;
          adminAdd.value = {
            username: "",
            password: "",
            phone: "",
            email: "",
            realname: "",
            status: 0
          }
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//修改状态
const chgStatus = (id, status) => {
  const admin = {
    id: id,
    status: status,
  }
  adminApi.update(admin)
      .then(resp => {
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          selectByPage(pageInfo.value.pageNum)
          UpdateDislogShow.value=false;

        }else {
          ElMessage.error(resp.msg)
        }
      })

}
//是否显示修改对话框
const UpdateDislogShow = ref(false);

//修改分类变量
const adminUpdate = ref({
    username: "",
    phone: "",
    email: "",
    realname: "",
    status: 0
})
//修改显示对话框的
const showUpdateModel = (id)=>{
  adminApi.selectById(id)
      .then(resp => {
        adminUpdate.value = resp.data;
      })
  UpdateDislogShow.value=true;
}
//修改商品分类
const update = ()=>{
  adminApi.update(adminUpdate.value)
      .then(resp => {
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          selectByPage(pageInfo.value.pageNum)
          UpdateDislogShow.value=false;

        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//禁用管理员状态
const updatePwd = (id)=>{
  let admin = {
    id: id,
    password: '123'
  }
  adminApi.update(admin)
      .then(resp =>{
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          selectByPage(1)
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
selectByPage(1)
</script>

<style scoped>

</style>